<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body class="container">
<div>
    <div style="background-color: antiquewhite">

<pre><code class="language-javascript">&lt;script&gt;
// js原生-查询和操作css
    var div = document.getElementsByTagName(&quot;div&quot;);
    var one = document.getElementsByClassName(&quot;one&quot;);
    var two = document.getElementById(&quot;two&quot;);
    div[0].style.backgroundColor = &quot;red&quot;;
    one[0].style.backgroundColor = &quot;yellow&quot;;
    two.style.backgroundColor = &quot;blue&quot;;

// jquery查询，操作CSS一步到位
$(document).ready(function () {
      $(&quot;div&quot;).eq(0).css(&#39;background&#39;, &#39;red&#39;);
      $(&quot;.one&quot;).eq(0).css(&#39;background&#39;, &#39;yellow&#39;);
      $(&quot;#two&quot;).css(&#39;background&#39;, &#39;blue&#39;);
  });


// 1.原生JavaScript批量修改
    var div = document.getElementsByTagName(&quot;div&quot;);
//    div.style.backgroundColor = &quot;red&quot;;// 无效
    for(var i = 0; i&lt;div.length; i++){
        div[i].style.backgroundColor = &quot;red&quot;;
    }

// 2.jQuery批量修改
    $(document).ready(function () {
        // 隐式遍历(迭代)找到的所有div
        $(&quot;div&quot;).css(&#39;background&#39;, &#39;yellow&#39;);
    });

    $(document).ready(function () {
        // 读取数据
        var $tx = $(&quot;div&quot;).eq(0).text();
        alert($tx);
        // 写入数据
        $(&quot;div&quot;).eq(0).text(&quot;新的数据&quot;);
    });

    $(document).ready(function () {
      // 所有jQuery代码写在这里面
         alert(&quot;hello LNJ&quot;);
    });
&lt;/script&gt;
</code></pre>

    </div>
</div>
</body>
</html>